<template>
  <div>
    <el-header>
      <Navbar />
    </el-header>
    <el-main>
      <div class="welcome">
        <h1>欢迎使用惊喜一餐！</h1>
        <p>探索最美味的餐厅，享受每一餐的惊喜！</p>
      </div>
      <h2>推荐餐厅</h2>
      <el-row>
        <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="8">
          <el-card>
            <img :src="restaurant.image" alt="Restaurant Image" />
            <h3>{{ restaurant.name }}</h3>
            <p>评分: {{ restaurant.rating }}</p>
            <el-button type="primary" @click="viewDetails(restaurant.id)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';

export default {
  components: { Navbar },
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '餐厅A', image: 'imageA.jpg', rating: 4.5 },
        { id: 2, name: '餐厅B', image: 'imageB.jpg', rating: 4.7 },
        { id: 3, name: '餐厅C', image: 'imageC.jpg', rating: 4.8 },
      ],
    };
  },
  methods: {
    viewDetails(id) {
      this.$router.push(`/restaurant/${id}`);
    },
  },
};
</script>

<style scoped>
.welcome {
  text-align: center;
  margin: 20px 0;
}
.el-card {
  margin-bottom: 20px;
}
</style>